<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>XHR的方法</title>
  </head>
  <body>
    <script>
      // 主要学习两个方法 abort()方法以及setRequestHeader()方法
      // 1 abort
      // 终止当前请求
      // 一般配合abort事件一起使用
      const url = "https://www.imooc.com/api/http/search/suggest?words=js";

      const xhr = new XMLHttpRequest();

      xhr.onreadystatechange = () => {
        if (
          (xhr.readyState == 4 && (xhr.status >= 200) & (xhr.status < 300)) ||
          xhr.status === 304
        ) {
          alert(xhr.responseText);
        } else {
          alert(xhr.statusText);
        }
      };

      xhr.open("GET", url, true);
      xhr.send(null);
      xhr.abort(); //可以终止 发送的命令

      //  2setRequestHeader()
      // 可以设置请求头信息
      // xhr.setRequestHeader(头部字段的名称,头部字段的值); 出于安全考虑只能设置一部分头信息
      // 一个重要的请求头信息 'Content-Type','application/x-www-form-urlencoded' ，这是用来设置post请求时候的数据格式的
      xhr.open("POST", url, true);
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xhr.send("username=alex&age=18");

      // 告诉浏览器数据格式是json
      xhr.setRequestHeader("Content-Type", "application/json");
      xhr.send(
        JSON.stringify({
          username: "alex",
        })
      );
    </script>
    <!-- 实际上在form表单中也告诉了浏览器传递的数据格式是 -->
    <form
      action=""
      method="post"
      enctype="application/x-www-form-urlencoded"
    ></form>
  </body>
</html>
